<template>
  <a-drawer width="600" :title="title" :visible="open" @close="handleClose">
    <a-form-model ref="formRef" :model="form" :rules="rules" :labelCol="{span: 4}" :wrapperCol="{span: 20}">
      <a-form-model-item label="部门" prop="deptId">
        <a-tree-select
          show-search
          treeNodeFilterProp="title"
          :treeDefaultExpandedKeys="[0]"
          v-model="form.deptId"
          :tree-data="sysDeptList"
          :dropdown-style="{maxHeight: '400px', overflow: 'auto'}"
          :replaceFields="{children:'children', title: 'deptName', key:'id', value: 'id'}"
          placeholder="请选择部门"/>
      </a-form-model-item>
      <a-form-model-item label="岗位" prop="postId">
        <a-select v-model="form.postId" placeholder="请选择岗位" allow-clear>
          <a-select-option v-for="(item, index) in sysPostList" :key="'post-' + index" :value="item.id">{{ item.postName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleIds">
        <a-select v-model="roleIds" mode="multiple" placeholder="请选择角色" @change="roleIdsChange" allow-clear>
          <a-select-option v-for="(item, index) in sysRoleList" :key="'role-' + index" :value="item.id">{{ item.roleName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="账号" prop="userName">
        <a-input v-model="form.userName" placeholder="请输入账号" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="昵称" prop="nickName">
        <a-input v-model="form.nickName" placeholder="请输入昵称" allow-clear/>
      </a-form-model-item>
      <a-form-model-item label="头像" prop="avatar">
        <file-upload v-model="form.avatar" type="image"/>
      </a-form-model-item>
      <a-form-model-item label="性别" prop="sex" allow-clear>
        <a-radio-group :default-value="form.sex" v-model="form.sex" button-style="solid">
          <a-radio-button v-for="(item, index) in sexOptions" :key="index" :value="parseInt(item.value)">{{ item.label }}</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否启用" prop="isEnable" allow-clear>
        <a-radio-group :default-value="form.isEnable" v-model="form.isEnable" button-style="solid">
          <a-radio-button :value="1">启用</a-radio-button>
          <a-radio-button :value="2">禁用</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</a-button>
          <a-button type="dashed" @click="handleClose">取消</a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>
<script>
import {getSysUser, saveSysUser, updateSysUser} from '@/api/system/sysUser'
import {listAllSysRole} from '@/api/system/sysRole'
import {listSysDept} from '@/api/system/sysDept'
import {listAllSysPost} from '@/api/system/sysPost'

export default {
  props: {
    sexOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      title: '',
      open: false,
      // 表单
      form: {},
      rules: {
        deptId: [{required: true, trigger: ['blur', 'change'], message: '请选择部门'}],
        postId: [{required: true, trigger: ['blur', 'change'], message: '请选择岗位'}],
        openId: [{required: true, trigger: ['blur', 'change'], message: '请输入openId'}],
        userName: [{required: true, trigger: ['blur', 'change'], message: '请输入账号'}],
        // password: [{required: true, trigger: ['blur', 'change'], message: '请输入密码'}],
        nickName: [{required: true, trigger: ['blur', 'change'], message: '请输入昵称'}],
        avatar: [{required: true, trigger: ['blur', 'change'], message: '请上传头像'}],
        sex: [{required: true, trigger: ['blur', 'change'], message: '请选择性别'}],
        isEnable: [{required: true, trigger: ['blur', 'change'], message: '请选择是否启用'}],
        roleIds: [{required: true, trigger: ['blur', 'change'], message: '请选择角色'}]
      },
      roleIds: [],
      sysDeptList: [],
      sysPostList: [],
      sysRoleList: []
    }
  },
  methods: {
    /** 点击关闭 */
    handleClose() {
      this.reset()
      this.open = false
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        deptId: undefined,
        postId: undefined,
        openId: undefined,
        userName: undefined,
        password: undefined,
        nickName: undefined,
        avatar: undefined,
        sex: 3,
        isEnable: 1,
        roleIds: undefined
      }
      this.roleIds = []
      listSysDept().then(res => {
        this.sysDeptList = this.handleTree(res.data)
      })
      listAllSysPost().then(res => {
        this.sysPostList = res.data
      })
      listAllSysRole().then(res => {
        this.sysRoleList = res.data
      })
    },
    /** 点击新增 */
    handleAdd() {
      this.reset()
      this.title = '添加用户'
      this.open = true
    },
    /** 点击修改 */
    handleUpdate(row) {
      this.reset()
      getSysUser(row.id).then(res => {
        this.title = '修改用户'
        this.open = true
        this.$nextTick(() => {
          this.form = res.data
          if (this.form.roleIds) {
            this.roleIds = this.form.roleIds.split(',').map(id => Number(id))
          }
        })
      })
    },
    /** 选择角色 */
    roleIdsChange() {
      this.form.roleIds = this.roleIds.join(',')
    },
    /** 点击保存 */
    handleSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id && this.form.id > 0) {
            updateSysUser(this.form).then(res => {
              this.$message.success(res.msg)
              this.handleClose()
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            saveSysUser(this.form).then(res => {
              this.$message.success(res.msg)
              this.handleClose()
              this.$emit('ok')
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    }
  }
}
</script>
